<template>
  <AppHeader v-show="showHeader" />
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>
<script>
import { defineComponent, reactive, toRefs, watch } from "vue";
import AppHeader from "@/components/Header.vue";
import { useRouter, useRoute } from "vue-router";
export default defineComponent({
  components: { AppHeader },
  setup() {
    const route = useRoute();
    const state = reactive({
      showHeader: true,
    });
    watch(route, (newRoute) => {
      state.showHeader = newRoute.meta.showHeader;
    });
    return { ...toRefs(state) };
  },
});
</script>

<style lang="scss">
</style>
